<template>
	<!-- :style="{'padding-bottom':(navHeight+wxHeight+(isBottom?bottomH:0))+'px)','background-color':contentColor}" -->
	<view :style="{'padding-bottom': bottomH*2+'rpx'}">
		<!-- <yer-navbar v-if="showNavbar" :title="title" :height="navHeight" :isBack="isBack"></yer-navbar> -->
		<u-navbar v-if="showNavbar" :height="navHeight" :back-icon-color="navTitleColor" :back-text-style="{'color':navTitleColor}" :title-color="navTitleColor" :title="title" :background="{'background-color':navbarBackground}"></u-navbar>
		<slot></slot>

		<view class="base-bottom" v-if="isBottom">
			<u-button type="primary" :ripple="true" @click="commit">{{bottomText}}</u-button>
		</view>
		<u-modal @confirm="confirm" v-model="modalShow" :content="modalContent"></u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		name: 'yer-base-page',
		props: {
			contentColor: {
				type: String,
				default: '#00ff00'
			},
			isBack: {
				type: Boolean,
				default: true
			},
			showNavbar: {
				type: Boolean,
				default: false
			},
			navbarBackground: {
				type: String,
				default: '#FFFFFF'
			},
			navTitleColor: {
				type: String,
				default: '#606266'
			},
			navHeight: {
				type: Number,
				default: 44
			},
			bottomText: {
				type: String,
				default: '提交'
			},
			isBottom: {
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default: ''
			}

		},
		data() {
			return {
				// #ifdef  MP-WEIXIN
				wxHeight: 40,
				// #endif
				bottomH: 100,
				modalShow: false,
				modalContent: ''
			};
		},
		methods: {
			commit() {
				this.$emit('commit');
			},
			showModal(content, confirm, cancel) {
				confirm(123)
			},
			showTost(title) {
				this.$refs.uToast.show({
					title: title,
					type: 'default',
				})
			},
			confirm() {

			}

		}
	}
</script>

<style>
	.base-bottom {
		position: fixed;
		width: 100%;
		padding: 30rpx 30rpx 30rpx 30rpx;
		bottom: 0;
		left: 0;
		z-index: 980;
		background-color: #ffffff;
	}
</style>
